<script lang="ts" setup>
  import {
    getHandicapCourseDetail,
    syncHandicapCourseHole,
  } from '@/api/course';
  import { onMounted, ref } from 'vue';
  import { CourseHole, HandicapCup } from '@/types/course';
  import { Message } from '@arco-design/web-vue';

  const props = defineProps<{
    courseId: string;
    cupId: string;
    courseOfficeId: string;
  }>();

  const emit = defineEmits(['close']);

  const handicapCups = ref<HandicapCup[]>([]);
  const loading = ref(false);
  const getData = async () => {
    loading.value = true;
    try {
      const res = await getHandicapCourseDetail(props.courseOfficeId);
      handicapCups.value = res.data.data.data.assess_cup_groups || [];
    } finally {
      loading.value = false;
    }
  };
  const selectedHandicapCupId = ref('');

  const saving = ref(false);
  const handleSubmit = async () => {
    if (!selectedHandicapCupId.value) {
      Message.warning('请选择要绑定的分场');
      return;
    }

    try {
      saving.value = true;
      const handicapCourseCupVO = handicapCups.value.find(
        (i) => i.id === selectedHandicapCupId.value
      );
      const courseHoles: Partial<CourseHole>[] = [];
      if (handicapCourseCupVO) {
        handicapCourseCupVO.cupTees = handicapCourseCupVO.assess_cup_tees;
        handicapCourseCupVO.cupTees.forEach((item) => {
          item.slopeRating = item.slope_rating;
          item.courseRating = item.course_rating;
          item.teeColor = item.tee_color;
          item.teeName = item.tee_name;
          item.teeColor = item.tee_color;
          item.teeTotalLength = item.tee_length_total;
        });
        handicapCourseCupVO.cupTees = handicapCourseCupVO.cupTees.filter(
          (i) => i.tee_name !== '特设T'
        );
        const handicapHoles = handicapCourseCupVO.cupTees[0]?.cups;
        if (handicapHoles) {
          const holeCount = handicapHoles.length;
          for (let i = 0; i < holeCount; i += 1) {
            const courseHole: Partial<CourseHole> = {
              courseId: props.courseId,
              cupId: props.cupId,
              holeType: i < 9 ? 0 : 1,
              holeIndex: i + 1,
              maleBlack: handicapCourseCupVO.cupTees
                .find((tee) => tee.teeColor === '男子黑TEE')
                ?.cups.find((cup) => cup.cup === i + 1)?.tee_length,
              maleGold: handicapCourseCupVO.cupTees
                .find((tee) => tee.teeColor === '男子金TEE')
                ?.cups.find((cup) => cup.cup === i + 1)?.tee_length,
              maleBlue: handicapCourseCupVO.cupTees
                .find((tee) => tee.teeColor === '男子蓝TEE')
                ?.cups.find((cup) => cup.cup === i + 1)?.tee_length,
              maleWhite: handicapCourseCupVO.cupTees
                .find((tee) => tee.teeColor === '男子白TEE')
                ?.cups.find((cup) => cup.cup === i + 1)?.tee_length,
              maleRed: handicapCourseCupVO.cupTees
                .find((tee) => tee.teeColor === '男子红TEE')
                ?.cups.find((cup) => cup.cup === i + 1)?.tee_length,
              malePurple: handicapCourseCupVO.cupTees
                .find((tee) => tee.teeColor === '男子紫TEE')
                ?.cups.find((cup) => cup.cup === i + 1)?.tee_length,
              femaleGold: handicapCourseCupVO.cupTees
                .find((tee) => tee.teeColor === '女子金TEE')
                ?.cups.find((cup) => cup.cup === i + 1)?.tee_length,
              femaleBlue: handicapCourseCupVO.cupTees
                .find((tee) => tee.teeColor === '女子蓝TEE')
                ?.cups.find((cup) => cup.cup === i + 1)?.tee_length,
              femaleWhite: handicapCourseCupVO.cupTees
                .find((tee) => tee.teeColor === '女子白TEE')
                ?.cups.find((cup) => cup.cup === i + 1)?.tee_length,
              femaleRed: handicapCourseCupVO.cupTees
                .find((tee) => tee.teeColor === '女子红TEE')
                ?.cups.find((cup) => cup.cup === i + 1)?.tee_length,
              femalePurple: handicapCourseCupVO.cupTees
                .find((tee) => tee.teeColor === '女子紫TEE')
                ?.cups.find((cup) => cup.cup === i + 1)?.tee_length,
              par: handicapCourseCupVO.cupTees[0]?.cups.find(
                (cup) => cup.cup === i + 1
              )?.par,
              officeId: handicapCourseCupVO.cupTees[0]?.cups.find(
                (cup) => cup.cup === i + 1
              )?.id,
            };
            courseHoles.push(courseHole);
          }
        }
      }
      await syncHandicapCourseHole(props.courseId, props.cupId, {
        courseHoles,
        handicapCourseCupVO,
      });
      Message.success('绑定成功');
      emit('close', true);
    } finally {
      saving.value = false;
    }
  };

  onMounted(() => {
    getData();
  });
</script>

<template>
  <a-modal
    title="绑定差点系统"
    :width="500"
    visible
    :ok-loading="saving"
    @cancel="emit('close', false)"
    @before-ok="handleSubmit"
  >
    <div
      style="
        padding: 0 12px;
        font-size: 12px;
        color: var(--color-text-2);
        margin-bottom: 5px;
      "
    >
      选择要绑定的分场：
    </div>
    <div class="list">
      <div
        v-for="cup in handicapCups"
        :key="cup.id"
        class="item"
        :class="{ active: cup.id === selectedHandicapCupId }"
        @click="selectedHandicapCupId = cup.id"
      >
        <div class="item-name">{{ cup.name }}</div>
        <div
          v-if="cup.id === selectedHandicapCupId"
          style="color: rgb(var(--green-6))"
        >
          <icon-check-circle-fill />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<style lang="less">
  .list {
    max-height: 400px;
    overflow: auto;
  }
  .item {
    display: flex;
    align-items: center;
    height: 36px;
    cursor: pointer;
    padding-right: 12px;
    &:hover {
      background: rgb(var(--gray-2));
    }
    &.active {
      background: rgb(var(--primary-1));
    }
    &-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 12px;
    }
  }
</style>
